<template>
    <view class="cart-temp">
        <header-bar :config="isEdit ? editConfig : config" @rightClick="rightClick"></header-bar>
        <view class="main">
            <mescroll-uni
                v-if="loadOk"
                :height="listHeight"
                ref="mescrollRef"
                @init="mescrollInit"
                :down="downOption"
                @down="refresh"
                :up="upOption"
                @up="getData"
                @emptyclick="emptyClick">
                <view class="cart-list">
                    <cart-item
                        v-for="(item, index) in getCartData"
                        :key="item.ProductId"
                        :selectData="selectData"
                        :productInfo="item"
                        @upNum="upNum"
                        @changeCheck="changeCheck"
                        @checkboxChange="checkboxChange"
                        >{{ item.name }}</cart-item
                    >
                </view>
                <view class="bottom-bar-mark" v-if="getCartData.length > 0"></view>
            </mescroll-uni>
        </view>

        <cart-bottom-bar
            ref="cartBottomBar"
            :isEdit="isEdit"
            :selectData="selectData"
            :isShowSelect="isShowSelect"
            :productInfo="getCartData"
            @selectAll="selectAll"
            @delCart="delCart"
            @isSelectAllBack="isSelectAllBack"></cart-bottom-bar>
    </view>
</template>

<script>
import { mapMutations, mapState, mapGetters } from "vuex"
import cartItem from "@/components/cart/cart-item.vue"
import cartBottomBar from "@/components/cart/cart-bottom-bar.vue"

import { getCarList, deleteUserCar } from "@/utils/valetCartUtil.js"

import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"

export default {
    components: {
        cartItem,
        cartBottomBar,
    },
    data() {
        return {
            loadOk: false,
            listHeight: "300px",
            config: {
                title: "购物车",
                centerSlot: true,
                rightSlot: true,
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "编辑",
                    },
                ],
            },
            editConfig: {
                title: "购物车",
                centerSlot: true,
                rightSlot: true,
                rightBtns: [
                    {
                        id: 1,
                        btnType: 1,
                        type: "完成",
                    },
                ],
            },
            isEdit: false,
            isShowSelect: true,
            upOption: {
                empty: {
                    btnText: "立即购买",
                },
            },
            datas: [],
            isLoadOk: false,
            isEmpty: false,
            selectData: {
                proIds: [],
                ids: [],
            },
            isSelectAll: true,
            getCartData: [],
        }
    },
    onLoad(e) {
        this.valetUserId = Number(e.valetUserId)
    },
    mounted() {
        this.getListHeight()
    },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - uni.upx2px(120) + "px"
                this.loadOk = true
                this.$nextTick(() => {
                    this.refresh()
                })
            })
        },
        //获取数据
        getData() {
            getCarList(this.valetUserId).then((res) => {
                if (res.length > 0) {
                    this.mescroll.endBySize(res.length, 1)
                    this.getCartData = res
                } else {
                    this.isEmpty = true
                    this.mescroll.endBySize(0, 0)
                    this.getCartData = []
                }
                this.upBottom()
                this.selectAll(true)
            })
        },
        //更新UI
        upView() {
            this.mescroll.endBySize(this.getCartData.length, 1)
        },
        //更新底栏
        upBottom() {
            this.$refs.cartBottomBar.getTotal(this.getCartData)
        },
        //刷新
        refresh() {
            this.mescroll.resetUpScroll()
        },
        //更新底栏数据
        upNum(e) {
            this.upBottom()
        },
        //去采购
        emptyClick() {
            this.easyGoBack()
        },
        //删除
        delCart(isClearAll) {
            if (isClearAll) {
                let ids = []
                this.getCartData.forEach((pro) => {
                    pro.SubItems.forEach((sub) => {
                        ids.push(String(sub.ID))
                    })
                })
                let param = {
                    ids: ids.join(","),
                }
                this.doDel(param)
            } else if (this.selectData.ids.length > 0) {
                let param = {
                    ids: this.selectData.ids.join(","),
                }
                this.doDel(param)
            }
        },
        //删除接口
        doDel(param) {
            uni.showLoading({
                title: "提交中",
            })
            deleteUserCar(param).then((res) => {
                if (res) {
                    uni.hideLoading()
                    this.refresh()
                    this.isEdit = false
                    this.selectData.ids = []
                }
            })
        },
        //全选
        selectAll(e) {
            // this.isSelectAll = e
            let ids = []
            if (e) {
                this.getCartData.forEach((pro) => {
                    pro.SubItems.forEach((sub) => {
                        ids.push(String(sub.ID))
                    })
                })
            }
            this.setTreeSelect(ids)
        },
        //商品子项选择回调
        checkboxChange(e, id) {
            let values = e.detail.value
            if (values.length > 0) {
                this.selectData.ids.push(values[0])
            } else {
                this.selectData.ids.forEach((e, index) => {
                    if (e == id) {
                        this.selectData.ids.splice(index, 1)
                    }
                })
            }
            this.setTreeSelect(this.selectData.ids)
        },
        //数据处理
        setTreeSelect(ids) {
            //去重
            const set = new Set(ids)
            ids = [...set]
            this.selectData = {
                ids: ids,
            }
            this.$forceUpdate()
        },
        //单个商品全选or取消全选
        changeCheck(obj) {
            let isSelect = obj.isSelect
            let proId = obj.proId
            let subIds = obj.subIds
            if (isSelect) {
                //全选
                this.getCartData.forEach((e) => {
                    if (e.ProductId == proId) {
                        e.SubItems.forEach((sub) => {
                            this.selectData.ids.push(String(sub.ID))
                        })
                    }
                })
            } else {
                //取消全选
                for (var i = this.selectData.ids.length - 1; i >= 0; i--) {
                    let e = this.selectData.ids[i]
                    subIds.forEach((sub) => {
                        if (e == sub) {
                            this.selectData.ids.splice(i, 1)
                        }
                    })
                }
            }
            this.setTreeSelect(this.selectData.ids)
        },
        isSelectAllBack(e) {
            this.isSelectAll = e
        },
        rightClick() {
            this.isEdit = !this.isEdit
        },
    },
}
</script>

<style lang="scss">
.container {
    .bottom-bar {
        /* #ifdef H5 */
        bottom: 50px;
        /* #endif */
    }

    .bottom-bar-mark {
        /* #ifdef H5 */
        height: 0;
        /* #endif */
    }
}

.cart-temp {
    display: flex;
    flex-direction: column;
}

.cart-list {
    padding: 0 $app-page-padding $app-page-padding $app-page-padding;
}
.main {
    padding-top: $app-page-padding;
}
</style>
